<template>
  <div>
    <t-popup
      style="width: 95%"
      v-model="showPopup"
      placement="center"
      :destroy-on-close="true"
      :round="true"
      @close="visiblehide"
    >
      <div class="popup-content">
        <div class="proptitle">学校筛选</div>
        <div class="form-content">
          <t-form :inline="inline" :data="formInline" label-position="right">
            <t-form-item label="所在省份：" label-width="170">
              <t-input
                v-model.trim="formInline.province"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请填写所在省份"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item label="所在区县：" label-width="170">
              <t-input
                v-model.trim="formInline.county"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请填写所在区县"
                style="width: 200px"
              ></t-input>
            </t-form-item>
            <t-form-item label="所在城市：" label-width="170">
              <t-input
                v-model.trim="formInline.city"
                maxlength="60"
                borderless
                clearable
                align="right"
                placeholder="请填写所在城市"
                style="width: 200px"
              ></t-input>
            </t-form-item>

            <t-form-item label="年级：" label-width="170">
              <t-input
                v-model.trim="formInline.grade"
                maxlength="60"
                clearable
                borderless
                align="right"
                placeholder="请填写年级"
                style="width: 200px"
              ></t-input>
            </t-form-item>

            <t-form-item label-width="170">
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell title="课程：" arrow @click="popupShow('course')">
                    <template #note>
                      <span :class="formInline.course ? 't_cell' : ''">{{
                        formInline.course || "请选择课程"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
                <DataSelector
                  :value="visible.course"
                  @close="visiblehide"
                  :selekey="'course'"
                  @change="changeSele('course', 'course_name', $event)"
                ></DataSelector>
              </div>
              <!-- 数据搜索 -->
            </t-form-item>

            <t-form-item label-width="170">
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="周几："
                    :note="formInline.week || '请选择周几'"
                    arrow
                    @click="popupShow('week')"
                  >
                    <template #note>
                      <span :class="formInline.week ? 't_cell' : ''">{{
                        formInline.week || "请选择周几"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-action-sheet
                v-model="visible.week"
                :items="weeklist"
                @cancel="visiblehide"
                :close-on-overlay-click="false"
                :show-overlay="false"
                @selected="receptionData('week', $event)"
              />
            </t-form-item>
            <t-form-item label-width="170">
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="上课时间："
                    :note="formInline.tart_time || '请选择上课时间'"
                    arrow
                    @click="popupShow('tart_time')"
                  >
                    <template #note>
                      <span :class="formInline.tart_time ? 't_cell' : ''">{{
                        formInline.tart_time || "请选择上课时间"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-popup
                v-model="visible.tart_time"
                placement="bottom"
                :close-on-overlay-click="false"
                :show-overlay="false"
              >
                <t-date-time-picker
                  @cancel="visiblehide"
                  @confirm="receptionData('tart_time', $event)"
                  :value="formInline.tart_time"
                  :mode="[null, 'minute']"
                  title="选择日期"
                  format="hh:mm:ss"
                />
              </t-popup>
            </t-form-item>

            <t-form-item label-width="170">
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="上课日期："
                    :note="formInline.num_time || '请选择上课日期'"
                    arrow
                    @click="popupShow('num_time')"
                  >
                    <template #note>
                      <span :class="formInline.num_time ? 't_cell' : ''">{{
                        formInline.num_time || "请选择上课日期"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-popup
                v-model="visible.num_time"
                placement="bottom"
                :close-on-overlay-click="false"
                :show-overlay="false"
              >
                <t-date-time-picker
                  @cancel="visiblehide"
                  @confirm="receptionData('num_time', $event)"
                  :value="formInline.num_time||dayjs().format('YYYY-MM-DD')"
                  :mode="['date']"
                  title="选择日期"
                  format="YYYY-MM-DD"
                />
              </t-popup>
            </t-form-item>

            <t-form-item label-width="170">
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="在地工作人员："
                    arrow
                    @click="popupShow('user_name')"
                  >
                    <template #note>
                      <span :class="formInline.user_name ? 't_cell' : ''">{{
                        formInline.user_name || "在地工作人员"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
                <DataSelector
                  :value="visible.user_name"
                  @close="visiblehide"
                  :selekey="'zdguser'"
                  @change="changeSele('user_name', 'username', $event)"
                ></DataSelector>
              </div>
            </t-form-item>

            <t-form-item label-width="170">
              <!--  <t-action-sheet v-model="visible" :items="baseData.items" @selected="handleSelected" @cancel="handleCancel" /> -->
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="是否排课："
                    :note="formInline.is_status || '选择是否排课'"
                    arrow
                    @click="popupShow('is_status')"
                  >
                    <template #note>
                      <span :class="formInline.is_status ? 't_cell' : ''">{{
                        showtitles(isStatusList, formInline.is_status) ||
                        "选择是否排课"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-action-sheet
                v-model="visible.is_status"
                :items="isStatusList"
                @cancel="visiblehide"
                :close-on-overlay-click="false"
                :show-overlay="false"
                readonly
                @selected="receptionData('is_status', $event)"
              />
            </t-form-item>
            <t-form-item
              label="核校状态"
              prop="status"
              label-width="170"
              v-if="hexsho"
            >
              <div style="width: 100%">
                <t-cell-group>
                  <t-cell
                    title="核校状态："
                    :note="formInline.status || '请选择核校状态'"
                    arrow
                    @click="popupShow('status')"
                  >
                    <template #note>
                      <span :class="formInline.status ? 't_cell' : ''">{{
                        showtitles(is_strise, formInline.status) ||
                        "请选择核校状态"
                      }}</span>
                    </template>
                  </t-cell>
                </t-cell-group>
              </div>
              <t-action-sheet
                v-model="visible.status"
                :items="is_strise"
                @cancel="visiblehide"
                :close-on-overlay-click="false"
                :show-overlay="false"
                readonly
                @selected="receptionData('status', $event)"
              />
            </t-form-item>
          </t-form>
        </div>

        <div
          class="t-form__footer"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
          "
        >
          <t-button
            size="large"
            theme="primary"
            variant="text"
            @click="showPopup = false"
            >关闭</t-button
          >
          <div style="display: flex">
            <t-button
              theme="primary"
              variant="outline"
              style="margin: 0 10px"
              @click="reset"
              >重置</t-button
            >
            <t-button
              style="margin: 0 10px"
              theme="primary"
              :disabled="loading"
              @click="submitForm()"
            >
              提交
            </t-button>
          </div>
        </div>
      </div>
    </t-popup>
  </div>
</template>
  
  <script>
import dayjs from "dayjs";
import { getStorage } from "@/utils/util";
import DataSelector from "@/components/h5com/dataSelector.vue";

export default {
  components: {
    DataSelector,
  },
  props: {
    status: {
      type: Boolean,
      default: false,
    },
    hexsho: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dayjs: dayjs,
      visible: {},
      showPopup: false,
      formInline: {},
      loading: false,
      couList: [],
      userIdList: [],
      weeklist: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      isStatusList: [
        { value: "1", label: "未排课" },
        { value: "2", label: "已排课" },
      ],
      is_strise: [
        {
          value: "1",
          label: "待核校",
        },
        {
          value: "2",
          label: "已核校",
        },
        {
          value: "3",
          label: "驳回",
        },
        {
          value: "4",
          label: "已通过",
        },
        {
          value: "5",
          label: "问题校",
        },
      ],
      verifyStatus: [
        { value: "1", label: "待核校" },
        { value: "2", label: "已核校" },
        { value: "3", label: "驳回" },
        { value: "4", label: "已通过" },
        { value: "5", label: "问题校" },
      ],
    };
  },
  created() {},
  mounted() {
    let seobjs = this.$route.query;
    if (seobjs.id) {
      delete seobjs.id;
      this.formInline = seobjs;
      this.$emit("submitForm", this.formInline);
      console.log(seobjs, "---------1111seobjs搜索内容");
    }
  },
  methods: {
    submitForm() {
      this.showPopup = false;
      this.$emit("submitForm", this.formInline);
    },
    changeSele(k, name, e) {
      // k是需要覆盖的数据 name是e下面的数据覆盖到k
      this.formInline[k] = e[name];
    },
    // showtitles 显示标题
    showtitles(arr, id) {
      let titles = "";
      if (!id) return;
      let arres = arr.filter((item) => item.value == id);
      if (arres.length) titles = arres[0].label;
      return titles;
    },
    receptionData(key, value) {
      // 接受弹出层的数据给 formInline 只接受但数据
      if (typeof value === "object" && value.value) {
        this.formInline[key] = value.value;
      }

      if (typeof value == "string") this.formInline[key] = value;

      this.visiblehide();
    },
    // 遮罩显示点击
    popupShow(value) {
      this.visible = {};
      console.log(value, "---------value");
      this.visible[value] = true;
    },
    visiblehide(value) {
      console.log("执行", value);
      // 遮罩层关闭
      this.visible = {};
    },
    async courseMethod(query) {
      if (!query) {
        this.couList = [];
        return;
      }

      this.loading = true;
      try {
        // 模拟API调用，实际应替换为真实接口
        const courseData = JSON.parse(getStorage("courseObj"))?.course || [];
        this.couList = courseData.filter((item) =>
          item.course_name.toLowerCase().includes(query.toLowerCase())
        );
      } finally {
        this.loading = false;
      }
    },
    async userMethod(query) {
      if (!query) {
        this.userIdList = [];
        return;
      }

      this.loading = true;
      try {
        const userData = JSON.parse(getStorage("courseObj"))?.zdguser || [];
        this.userIdList = userData.filter((item) =>
          item.username.toLowerCase().includes(query.toLowerCase())
        );
      } finally {
        this.loading = false;
      }
    },
    handleStatusChange(value) {
      this.$emit("status-change", value);
    },
    reset() {
      // 数据清空
      this.formInline = {};
      this.showPopup = false;

      this.$emit("resetscreem");
    },
    reset2() {
      // 数据清空
      console.log("重置-------------------1");
      this.formInline = {};
      this.showPopup = false; 
    },
    onSearch() {
      this.showPopup = false;
      this.$emit("search", this.formInline);
    },
  },
};
</script>
  
  <style scoped>
.popup-content {
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  width: 90vw;
  max-width: 500px;
  box-sizing: border-box;
}

.popup-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.empty-tips {
  padding: 8px 0;
  color: var(--td-gray-color-6);
  text-align: center;
}

@media (max-width: 640px) {
  .popup-content {
    width: 100%;
    overflow-y: auto;
  }

  :deep(.t-form-item__label) {
    font-size: 14px;
  }

  :deep(.t-picker__toolbar) {
    padding: 8px 12px;
  }
}
</style>
  
  <style lang="scss" scoped>
.custom-input {
  :deep(.t-t-input--default) {
    font-size: 20px; /* 调整输入框 placeholder 字体大小 */
  }
}
</style>
  
  <style>
.t-form__label--right {
  font-size: 14px;
}
.t-cell__title-text {
  font-size: 14px;
}
.t-form__label--left {
  font-size: 14px; /* 调整左侧标签字体大小 */
}

.t-form__label {
  padding: 0;
}

.t-input--default {
  font-size: 13px;
}

.t-input--default::placeholder {
  color: gray; /* 设置颜色 */
  font-size: 14px !important; /* 设置字体大小 */
  border: none;
  /* 其他样式，例如字体系列 */
}

.t-form__item {
  padding-left: 10px;
  padding-right: 10px;
}

.t-input--default {
  font-size: 14px; /* 调整输入框字体大小 */
  border-bottom: none !important; /* 移除默认下划线 */
}
.t_cell {
  color: #000;
  font-size: 14px;
}
.t-cell__note {
  font-size: 14px;
}
.proptitle {
  font-size: 16px;
  font-weight: 600;
  padding: 10px 0;
}
.form-content {
  min-height: 50vh;
  max-height: 70vh;
  overflow-y: auto;
}
</style>